<template>
  <Content title="我的" :callback="callback" tab tabCurrent="user">
    <view class="login-box">
      <view class="top-content">
        <view class="top-content-l">
          <view class="user-img-box">
            <image class="img" src="@/static/user1.png" />
          </view>
          <view class="text-box" v-if="userInfo.realname">
            <view class="label">{{ userInfo.realname }}</view>
            <view class="txt">欢迎您</view>
          </view>
          <view class="text-box" v-else>
            <view>请登录</view>
          </view>
        </view>
        <view class="top-content-r">
          <u-button
            v-if="userInfo.realname"
            type="primary"
            @click="submit"
            text="退出"
          ></u-button>
          <u-button v-else type="primary" @click="login" text="登录"></u-button>
        </view>
      </view>
      <view class="from-box">
        <view class="content">
          <u-cell-group :border="false">
            <!-- <u-cell title="意见与反馈" :isLink="true" :border="false"></u-cell> -->
            <u-cell
              title="修改密码"
              :isLink="true"
              :border="false"
              @click="toPath('/pages/user/pass')"
            ></u-cell>
            <!-- <u-cell
              title="清除缓存"
              :isLink="true"
              :border="false"
              @click="clear"
            ></u-cell>
            <u-cell title="关于" :isLink="true" :border="false"></u-cell>
            <u-cell
              title="产品咨询：021-50801018"
              :isLink="false"
              :border="false"
            ></u-cell> -->
          </u-cell-group>
        </view>
      </view>
    </view>
  </Content>
</template>

<script>
import Content from "@/components/content/index.vue";
import fetch from "@/utils/fetch";
import { setToken, setUserInfo, getUserInfo } from "@/store/user";
export default {
  components: {
    Content,
  },
  data() {
    return {
      rules: {
        username: {
          type: "string",
          required: true,
          message: "请填写账号",
          trigger: ["blur", "change"],
        },
        password: {
          type: "string",
          required: true,
          message: "请填写密码",
          trigger: ["blur", "change"],
        },
        code: {
          type: "string",
          required: true,
          message: "请填写验证码",
          trigger: ["blur", "change"],
        },
      },
      model: {
        username: "",
        password: "",
        checkKey: "",
        code: "",
      },
      codeImg: "",
      userInfo: {},
    };
  },
  onShow() {
    this.userInfo = getUserInfo();
    this.getRandomImage();
  },
  mounted() {},
  methods: {
    clear() {
      setToken("");
      setUserInfo("");
      uni.reLaunch({
        url: "/pages/login/index",
        animationType: "pop-in",
      });
    },
    toPath(path) {
      uni.navigateTo({
        url: path,
        animationType: "pop-in",
      });
    },
    callback() {
      uni.navigateTo({
        url: "/pages/home/index",
        animationType: "pop-in",
      });
    },
    login() {
      uni.reLaunch({
        url: "/pages/login/index",
        animationType: "pop-in",
      });
    },
    submit() {
      const that = this;
      that.$tips("提示", "是否确认退出？", function (res) {
        if (res.confirm) {
          that.clear();
        }
      });
    },
    getRandomImage() {
      this.model.checkKey = new Date().valueOf() + "";
      fetch("get", "/basic/captchaImage", "", "", true).then(({ data }) => {
        this.codeImg = data.img;
        this.model.uuid = data.uuid;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.login-box {
  position: relative;
  padding-top: 150rpx;
  height: 100vh;
  background-color: #419ede;
  display: flex;
  flex-direction: column;
  background-size: cover;

  .tip {
    padding: 0 54rpx;
    height: 93rpx;
    margin-bottom: 67rpx;

    .dt {
      font-size: 36rpx;
      font-weight: 600;
      margin-bottom: 27rpx;
    }

    .dd {
    }
  }
}

.log {
  position: absolute;
  left: 58rpx;
  top: 40rpx;
  height: 66rpx;
  width: 50%;
}

.from-box {
  flex: 1;
  padding: 57rpx 60rpx;
  background-color: #ffffff;
  border-radius: 20px 20px 0 0;

  /deep/ .u-form-item__body__left__content__label {
    font-size: 34rpx;
    margin-bottom: 25rpx;
  }

  /deep/ .u-input {
    background-color: #f2f2f2;
    height: 80rpx;
    border-radius: 10px;
  }
}
.top-content {
  height: 173rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  margin-bottom: 20rpx;
  .top-content-l {
    flex: 1;
    display: flex;
    align-items: center;
    color: #fff;
  }
  .text-box {
    .label {
      margin-bottom: 10rpx;
    }
    .txt {
      font-size: 14px;
      color: #efeded;
    }
  }

  .user-img-box {
    border-radius: 50%;
    background-color: #82b4fd;
    width: 120rpx;
    height: 120rpx;
    text-align: center;
    margin-right: 32rpx;
  }

  .img {
    width: 100rpx;
    height: 100rpx;
    padding: 10rpx;
  }
}

.but-box {
  width: 100%;
  margin-top: 159rpx;
  display: flex;
  justify-content: space-between;

  .btn {
    flex: 1;

    &:first-child {
      margin-right: 40rpx;
    }
  }
}

.code-box {
  display: flex;
  width: 100%;

  .img {
    width: 200rpx;
    height: 80rpx;
    margin-left: 10px;
  }
}
</style>
